<template>
    <div class="mike_body">
        <!-- 按钮用于启动和停止录音 -->
        <el-button @click="startRecording">{{ stream ? '停止录制' : '开始实时记录' }}</el-button>
        <!-- 按钮用于播放录制的音频 -->
        <el-button @click="playAudio" :disabled="!audioBlob">播放录制的音频</el-button>
        
        <!-- 音波形显示的容器 -->
        <div id="waveform"></div>

        <audio controls="controls" height="60" class="media_title_video" v-if="urlBox">
            <source :src="urlBox" type="audio/mp3" />
            <source :src="urlBox" type="audio/ogg" />
            <embed height="60" :src="urlBox" />
        </audio>
    </div>
</template>

<script>
//npm install recordrtc  //RecordRTC 是一个强大的JavaScript库，可以用来录制音频、视频或屏幕共享。它简化了媒体捕获的过程，并提供了一系列的配置选项来控制录制的行为。
//npm install wavesurfer.js //wavesurfer.js 是一个可视化音频波形的库。它支持多种波形显示方式，可以在浏览器中实时显示音频播放的波形图。
import RecordRTC from 'recordrtc';
import WaveSurfer from 'wavesurfer.js'; // 音波

export default{
    name: "mike",
    data() {
      return {
        recorder: null, // 用于存储RecordRTC实例
        stream: null, // 用于存储从用户麦克风获取的媒体流
        wavesurfer: null, // 用于存储WaveSurfer实例
        audioBlob: null, // 存储录音的Blob对象

        list:[],

        urlBox: '',
      };
    },
    mounted() {
        // 初始化WaveSurfer实例
        this.wavesurfer = WaveSurfer.create({
            container: '#waveform', // 指定波形图的DOM容器
            waveColor: '#67C23A', // 波形的颜色
            progressColor: 'purple' // 播放进度颜色
        });
    },
    created(){
        this.fun();
    },
    methods: {
        fun(){
            console.log('123');
        },
        mikeFun(){

        },
        async startRecording() {
            // 检查是否已经在录音
            if (!this.stream) {
                try {
                    // 请求用户的麦克风访问权限并获取媒体流
                    this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                    // 创建一个新的RecordRTC实例用于录制获取的媒体流
                    this.recorder = new RecordRTC(this.stream, {
                        type: 'audio' // 设置录制类型为音频
                    });
                    // 开始录制
                    this.recorder.startRecording();
                    console.log('录音开始...');
                } catch (error) {
                    // 处理错误，例如用户拒绝了访问麦克风的权限
                    console.error('获取麦克风权限失败:', error);
                }
            } else {
                // 如果已经在录音，则调用停止录音的功能
                this.stopRecording();
            }
        },
        stopRecording() {
            // 停止录音
            this.recorder.stopRecording(() => {
                // 获取录音数据
                this.audioBlob = this.recorder.getBlob();
                // 创建 Blob URL
                this.urlBox = URL.createObjectURL(this.audioBlob);

                // 使用WaveSurfer加载录音的音频Blob
                this.wavesurfer.loadBlob(this.audioBlob);
                console.log('录音结束，波形加载中...');

                // 停止媒体流，释放麦克风
                this.stream.getAudioTracks().forEach(track => track.stop());
                this.stream = null;
            });
        },
        playAudio() {
            if (this.audioBlob) {
                // 创建一个用于播放录音的新的audio元素
                const audio = new Audio(URL.createObjectURL(this.audioBlob));
                audio.play();
                console.log('播放录制的音频...');
            }
        }
    },
    beforeDestroy() {
        // 组件销毁前，确保媒体流和波形视图被正确释放
        if (this.stream) {
            this.stream.getAudioTracks().forEach(track => track.stop());
        }
        if (this.wavesurfer) {
            this.wavesurfer.destroy();
        }
    },
    components:{
    },
}
</script>

<style setup lang='scss'>
.mike_body{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border:solid 5px #007700;
    height: calc(100vh - 50px);
    overflow-y: auto;
}

.hasTagsView {
    .mike_body{
        height: calc(100vh - 84px);
    }
}
</style>
<style lang='scss'>
</style>